<template>
  <div class="setting">
    <ContentBox @left="back" :fixed="true" title="设置">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <div class="user_info">
      <van-uploader
        :max-size="100*1024*1024"
        :max-count="1"
        :preview-image="false"
        :after-read="uploadfile"
        @oversize="oversize"
      >
        <van-image
          round
          width="1.12rem"
          height="1.12rem"
          fit="cover"
          :src="avatar"
        />
      </van-uploader>
      <div class="info_name">
        <p>{{newnickname}}<van-icon :name="$img('edit_name.png')" size=".34rem" class="edit_icon" @click="openEditNickname"/></p>
        <span>{{uinfo.add_time}}</span>
      </div>
    </div>
    <div class="link_box">
      <van-cell title="账号与安全" is-link to="/account"/>
      <van-cell title="关于我们" is-link to="/clause?code=about_us"/>
    </div>
    <div class="login_out" @click="loginOut">退出登录</div>
    <van-dialog
      v-model="show"
      title="修改名称"
      show-cancel-button
      @confirm="updata"
    >
      <van-cell-group>
        <van-field v-model="nickname" placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
import apiURL from '@/httpConfig/api.js'
export default {
  data () {
    return {
      uinfo: '',
      avatar: '',
      show: false,
      nickname: '',
      newnickname: ''
    }
  },
  methods: {
    oversize () {
      this.$toast('图片大小不能超过1M')
      return false
    },
    openEditNickname () {
      this.nickname = ''
      this.show = true
    },
    uploadfile (file) {
      this.$upload(file).then(res0 => {
        this.$axios.post('/api/user/update_user_info', {
          avatar: res0[0]
        }).then(res1 => {
          if (res1.status === 200) {
            this.$toast.success('修改成功')
            this.avatar = `${apiURL}${res0[0]}`
            this.getUinfo()
          }
        })
      })
    },
    getUinfo () {
      this.$axios.get(`/api/user?_=${Math.random() * Math.random()}`).then(res => {
        if (res.status === 200) {
          this.$store.commit('SET_UINFO', res.data)
          localStorage.setItem('uinfo', JSON.stringify(res.data))
        }
      })
    },
    updata () {
      if (this.nickname === '') {
        this.$toast('用户名不能为空')
        return false
      }
      this.$axios.post('/api/user/update_user_info', {
        nickname: this.nickname
      }).then(res => {
        if (res.status === 200) {
          this.$toast.success('修改成功')
          this.newnickname = this.nickname
          if (this.$store.state.pl === 'IOS') {
            window.iosCallHandler('updataInfo')
          }
          this.getUinfo()
          this.show = false
        }
      })
    },
    loginOut () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否退出'
      }).then(_ => {
        if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('logout')
        } else {
          localStorage.clear()
          this.$router.replace('/')
        }
      })
    },
    back () {
      if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      }
    }
  },
  created () {
    this.uinfo = this.$store.state.uifo
    this.avatar = this.$store.state.uifo.avatar
    this.newnickname = this.$store.state.uifo.nickname
  }
}
</script>

<style lang="scss">
.setting{
  height: 100%;
  padding-top: 1.36rem;
  background: #f0f0f0;
  position: relative;
  .user_info{
    background: #ffffff;
    padding: .4rem .32rem;
    border-radius: .08rem;
    display: flex;
    align-items: center;
    .info_name{
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;
      margin-left: .16rem;
      p{
        display: flex;
        align-items: center;
        color: #333333;
        font-size: .32rem;
        .edit_icon{
          margin-left: .16rem;
        }
      }
      &>span{
        color: #999999;
        font-size: .24rem;
        margin-top: .08rem;
      }
    }
  }
  .link_box{
    background: #ffffff;
    border-radius: .08rem;
    margin-top: .24rem;
  }
  .login_out{
    position: absolute;
    bottom: 1.28rem;
    left: 0;
    width: 100%;
    height: .96rem;
    background: #ffffff;
    font-size: .28rem;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .not{
    position: fixed;
    top: .88rem;
    width: 100%;
    left: 0;
  }
}
</style>
